<template>
  <div class="container">
    <!--   <van-nav-bar :border="false"
                 title="重置密码"
                 left-arrow
                 @click-left="$router.back()" /> -->
    <Navbar title='重置密码'></Navbar>
    <van-form @submit="onSubmit">
      <van-field v-model="formDate.username"
                 name="账号"
                 placeholder="账号"
                 :rules="[{ validator:verifyUsername, required: true, message: '请填写正确的账号',trigger:'onBlur' }]" />
      <van-field v-model="formDate.oldpassWord"
                 type="password"
                 name="旧密码"
                 placeholder="旧密码"
                 :rules="[{validator:verifyPassword, required: true, message: '请填写旧密码',trigger:'onBlur' }]" />
      <van-field v-model="formDate.newpassword"
                 type="password"
                 name="新密码"
                 placeholder="请输入新密码"
                 :rules="[{validator:verifyPassword, required: true, message: '请填写新密码',trigger:'onBlur' }]" />
      <van-field v-model="formDate.confirmpassword "
                 type="password"
                 name="确认密码"
                 placeholder="请确认密码"
                 :rules="[{validator:affirmPassword, required: true, message: '两次密码不一致',trigger:'onBlur'}]" />
      <van-field v-model="formDate.captcha_code"
                 type="number"
                 name="验证码"
                 placeholder="验证码"
                 :rules="[{validator:verifyCode, required: true, message: '请填写验证码',trigger:'onBlur' }]">
        <template #extra>
          <div id="updateCode">
            <img :src="Img"
                 alt="验证码" />
            <a href="#"
               @click="getCode">
              <span>看不清</span>
              <span>换一张</span>
            </a>
          </div>
        </template>
      </van-field>
      <div style="margin: 16px">
        <van-button block
                    type="primary"
                    native-type="submit">确认修改</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { getCode, changePassword } from "@/api/login";
import { removeAvatar } from "@/utils/storage";

export default {
  data () {
    return {
      formDate: {
        username: '',
        oldpassWord: '',
        newpassword: '',
        confirmpassword: '',
        captcha_code: ''
      },
      Img: ''
    };
  },
  created () {
    this.getCode()
  },
  methods: {
    async onSubmit () {
      try {
        const { data } = await changePassword(this.formDate)
        if (data.status === 0 && data.type === 'ERROR_CAPTCHA') {
          this.$toast('验证码不正确')
          this.getCode()
          return
        }
        if (data.status === 0 && data.type === 'ERROR_PASSWORD') {
          this.$toast('密码不正确')
          this.getCode()
          return
        }
        this.$toast('修改成功')
        this.formDate = {
          username: '',
          oldpassWord: '',
          newpassword: '',
          confirmpassword: '',
          captcha_code: ''
        }
      this.$router.push('/login')
      removeAvatar('avatar')
      removeAvatar('userName')
      this.setUserInfo({})
      localStorage.removeItem('userInfo')
      } catch (error) {
        console.log(error);
      }


    },
    //获取验证码
    async getCode () {
      const { data } = await getCode()
      this.Img = data.code
    },
    //验证账号
    verifyUsername (value) {
      return /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/.test(value)
    },
    //验证密码
    verifyPassword (value) {
      return /^[a-zA-Z]\w{5,17}$/.test(value)
    },
    //确认新密码
    affirmPassword (value) {
      return this.formDate.newpassword === value
    },
    //验证 验证码
    verifyCode (value) {
      return /^\d{4}$/.test(value)
    }
  }
};
</script>

<style lang='less' scoped>
.container {
  /*  /deep/ .van-nav-bar {
    background-color: #3190e8;
    margin-bottom: 10px;
    .van-icon {
      color: #fff;
    }
    .van-nav-bar__title {
      color: #fff;
      font-weight: 700;
      font-size: 19px;
    }
  } */
  .text {
    padding-left: 18px;
    p {
      font-size: 12px;
      color: #ff0000;
    }
  }
  .resetpass {
    display: flex;
    justify-content: end;
    padding-right: 12px;
    padding-top: 10px;
    a {
      color: #3e9fff;
    }
  }
  #updateCode {
    display: flex;
    a {
      color: #3e9fff;
      img {
        width: 180px;
        height: 80px;
      }
      span {
        display: block;
        font-size: 12px;
      }
    }
  }
}
</style>